<template>
  <div class="container lawyer-details pb">
    <p class="bread">
      <a href="#/">首页</a> >
      <a href="#/lawyerlist" class="font-s-18">法律服务</a> >
      <a href="javascript:void(0);" class="font-s-16">律师详情</a>
    </p>
    <div class="bg-c-fff fix mb20">
      <div class="flo-left lawyerImg">
        <img :src="lawyerPic" alt="">
      </div>
      <div class="flo-left lawyer-data">
        <h3>{{lawyerName}}<span>律师（{{lawyerSex|sexfilter}}）</span></h3>
        <p><i class="iconfont icon-dizhi-copy"></i><span>{{address}}</span>| <span>河北诚基律师事务所</span> </p>
        <p><i class="iconfont icon-shijian"></i><span>执业年限：{{careerYear}}</span> </p>
        <p><i class="iconfont icon-dianzan3"></i>擅长领域：{{field}}</p>
      </div>
      <div class="flo-right lawyer-btn">
        <button @click="onContactShow()" class="small-btn-css blue-button">联系律师</button>
      </div>
    </div>
    <div class="fix">
      <div class="container-left flo-left bg-c-fff lawyer-details-con">
        <h3>个人简介</h3>
        <p>{{individualResume}}</p>
      </div>
      <div class="container-right flo-right lawyer-details-right">
        <div class="bg-c-fff mb20 box tc">
          <h3 class="blue-title tl">客户评价</h3>
          <p class="tl">若您已经和律师取得联系，并使用了该律师的法律服务，请就本次服务进行评价，您的评价对我们非常重要，感谢您的配合。</p>
          <button class="blue-button small-btn-css" @click="onPj">评价律师</button>
        </div>
        <div class="bg-c-fff box">
          <h3 class="blue-title">投诉电话</h3>
          <p><i class="iconfont icon-kefu vm"></i>0311-85629919</p>
        </div>
      </div>
    </div>
    <vodal :show="contactShow" animation="rotate" :width="400" :height="240" @hide="contactShow = false">
      <div class="vodal-box">
        <h2>联系律师</h2>
        <div class="contact-con con">
          <p>您可以与律师取得联系，进一步沟通详细需求。</p>
          <p>联系电话：{{registPhone}}</p>
        </div>
      </div>
      <div class="tc auto vodal-box">
        <button class="blue-button small-btn-css" @click="contactShow = false">确认</button>
        <button class="white-button small-btn-css" @click="contactShow = false">取消</button>
      </div>
    </vodal>
    <vodal :show="evaluateShow" animation="zoom" :width="400" :height="260" @hide=" evaluateShow = false">
      <div class="vodal-main">
        <h4>评价律师</h4>
        <div class="con tc">
          <p>请先上传与律师线下签订的委托合同。</p>
          <button class="onUpload tc" id="uploaderBtn">上传</button>
        </div>
        <div class="tc auto vodal-btn-box">
          <!-- <a href="#/lawyer-evaluate"> -->
          <button class="blue-button small-btn-css" @click="evaluateFn">确认</button>
          <!-- </a> -->
          <button class="white-button small-btn-css" @click="evaluateShow = false">取消</button>
        </div>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript">
import Vodal from 'Vodal'
import LawyerVodal from '../components/LawyerVodal'
import FileUploadManager from '../components/FileUploaderManager'
export default {
  components: {
    LawyerVodal,
    Vodal
  },
  data() {
    return {
      lawyerName: '',
      lawyerSex: '',
      address: '',
      careerYear: '',
      field: '',
      lawyerPic: '',
      registPhone: '',
      individualResume: '',
      contactShow: false,
      evaluateShow: false,
      protocolUrl: '',
      memberId: ''
    }
  },
  mounted() {
    this.initUploader()
    this.$http.get('/member/query/lawyer/detail', {
      params: {
        id: this.$route.query.id
      }
    }).then(data => {
      if (data.data.httpCode === 200) {
        console.log(data.data.data)
        this.lawyerName = data.data.data.lawyerName
        this.lawyerSex = data.data.data.lawyerSex
        this.address = data.data.data.address
        this.careerYear = data.data.data.careerYear
        this.field = data.data.data.field.replace(/;/g, ' | ')
        this.lawyerPic = data.data.data.lawyerPic
        this.registPhone = data.data.data.registPhone
        this.individualResume = data.data.data.individualResume
        this.memberId = data.data.data.memberId
      } else {
        console.log(data.data.msg)
        this.$toasted.show(data.data.msg)
      }
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    onContactShow() {
      this.contactShow = true
    },
    onPj() {
      this.evaluateShow = true
    },
    startUpload() {
      if (this.uploader.startUpload()) {

      } else {
        this.$toasted.show('正在上传文件，请稍后再试')
      }
    },
    initUploader() {
      this.uploader = new FileUploadManager('protocolPho', 'uploaderBtn', (url) => {
        this.protocolUrl = url
        this.$toasted.show('上传成功')
      }, (msg) => {
        this.$toasted.show(msg)
      }, true)
    },
    evaluateFn() {
      if (this.protocolUrl) {
        this.evaluateShow = false
        this.$router.push('/lawyer-evaluate?id=' + this.$route.query.id)
      }
    }
  },
  filters: {
    sexfilter(s) {
      if (s === 0) {
        return '男'
      }
      if (s === 1) {
        return '女'
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.lawyer-data {
  margin-left: 40px;
  color: #282828;
}

.pb {
  padding-bottom: 70px;
}

.container-left {
  width: 950px;
  margin-right: 20px;
}

.container-right {
  width: 230px;
}

.lawyer-data img {
  width: 180px;
  height: 180px;
}

.lawyer-data h3 {
  font-weight: bold;
  font-size: 18px;
  line-height: 48px;
  margin-top: 10px;
}

.lawyer-data h3 span {
  font-weight: normal;
  font-size: 16px;
  margin-left: 10px;
}

.lawyer-data p {
  line-height: 36px;
}

.lawyer-data p i {
  color: #7a7a7a;
  margin-right: 8px;
}

.lawyer-data p span {
  padding: 0 8px;
  margin-left: -5px;
}

.lawyer-btn {
  margin-right: 40px;
}

.lawyer-details .lawyer-btn {
  margin-top: 122px;
}

.lawyer-details-con {
  padding: 10px 50px 50px 20px;
}

.lawyer-details-con h3 {
  font-size: 18px;
  font-weight: bold;
  color: #282828;
  line-height: 40px;
  margin-bottom: 10px;
}

.lawyer-details-con p {
  line-height: 29px;
  color: #282828;
  padding-left: 20px;
}

.lawyer-details-right .box {
  padding: 10px 28px 10px 20px;
  color: #818181;
}

.lawyer-details-right .blue-button {
  margin-top: 31px;
}

.lawyer-details-right .box h3 {
  margin-bottom: 15px;
}

.lawyer-details-right .box p {
  line-height: 28px;
}

.lawyer-details-right .box p i {
  margin-right: 4px;
  font-size: 24px;
}

.lawyerImg {
  width: 180px;
  height: 180px;
}

.lawyerImg img {
  height: 100%;
  max-width: 180px;
}

.vodal-box .con {
  padding: 0 20px;
  margin: 30px 20px;
}

.vodal-box h2 {
  background-color: #d8e7ff;
  font-size: 14px;
  font-weight: bold;
  line-height: 40px;
  text-indent: 40px;
}

.vodal-box .contact-con p {
  margin-bottom: 30px;
}

.onUpload {
  width: 120px;
  height: 40px;
  border: 1px dashed #ddd;
  line-height: 40px;
  margin-top: 37px;
}

</style>
